<template>
    <el-dialog :close-on-click-modal="false"  :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" append-to-body>
        <el-table v-loading="loading" :data="draggableList" class="draggable_table" border style="width: 100%" row-key="label">
            <el-table-column label="是否启用" width="80">
                <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.isShow"></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column :prop="labelKey" label="模块名称" width="180">
            </el-table-column>
            <el-table-column label="排序" width="50">
                <template slot-scope="scope">
                    <i v-show="scope.row" class="el-icon-s-fold"></i>
                </template>
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
   
<script>
import Sortable from 'sortablejs';
export default {
    props: {
        title: {
            type: String,
            default: () => {
                return '自定义字段'
            }
        },
        keyName: {
            type: String,
            default: () => {
                return ''
            }
        },
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
        dialogVisible: {
            type: Boolean,
            default: true
        },
        labelKey: {
            type: String,
            default: () => {
                return 'label'
            }
        },
    },
    data () {
        return {
            loading:false,
            draggableList: []
        }
    },
    watch: {
        dialogVisible (v) {
            v && this.initData();
        }
    },
    mounted () {
        this.initData();
    },
    methods: {
        saveDraggableList () {
            console.log()
            let fliterShowItem = this.draggableList.filter(item => {
                return item.isShow == true
            })
            if (fliterShowItem.length == 0) {
                this.$message.warning('至少一个展示项!');
                return false
            } else if (fliterShowItem.length > 20) {
                this.$message.warning('最多二十个展示项!');
                return false
            } else {
                return true
            }
        },
        initData () {
            let draggableList = JSON.parse(sessionStorage.getItem(this.keyName)) || null;
            this.draggableList = draggableList || this.list;
            this.loading = true
            console.log(this.draggableList)
            setTimeout(() => {
                this.loading = false;
                this.rowDrop()
            }, 2000)
        },
        // 行拖拽
        rowDrop () {
            // 要侦听拖拽响应的DOM对象（数据存储在.draggable_table > .el-table__row > tbody标签中（el-table的数据部分的“最外层”class名为el-table__body-wrapper））
            const tbody = document.querySelector('.draggable_table tbody');
            const that = this;
            console.log(tbody)
            if (tbody) {
                Sortable.create(tbody, {
                    onEnd ({ newIndex, oldIndex }) {
                        // 结束拖拽后的回调函数
                        console.log('拖动了行，序号(index)"' + oldIndex + '"拖动到序号(index)"' + newIndex + '"');
                        // 将oldIndex位置的数据删除并取出，oldIndex后面位置的数据会依次前移一位
                        const currentRow = that.draggableList.splice(oldIndex, 1)[0];
                        // 将被删除元素插入到新位置（currRow表示上面的被删除数据）
                        that.draggableList.splice(newIndex, 0, currentRow);
                    }
                })
            }
        },
        confirm () {
            if (this.saveDraggableList()) {
                sessionStorage.setItem(this.keyName, JSON.stringify(this.draggableList))
                this.$emit('getDraggableList', this.draggableList);
                this.cancel()
            }
        },
        cancel () {
            this.$emit('closeDialog')
        },
        handleClose (done) {
            this.$confirm('确认关闭？').then(_ => {
                this.cancel()
            }).catch(_ => { });
        }
    }
}
</script>
   
<style scoped></style>